<template>
  <!-- 用户资料 -->
  <div class="userProfile-container">
    <!-- 本地头像上传 -->
    <input type="file" hidden ref="inputFile" @change="inputChange">
    <!-- 导航栏 -->
    <van-nav-bar title="个人信息" class="page-nav-bar">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <!-- 头像 -->
    <van-cell class="avator-cell" title="头像" is-link @click="$refs.inputFile.click()">
      <van-image round width="30" fit="cover" height="30" :src="user.photo" />
    </van-cell>
    <!-- 昵称 -->
    <van-cell title="昵称" :value="user.name" is-link @click="isNameShow=true" />
    <!-- 性别 -->
    <van-cell title="性别" :value="user.gender?'女':'男'" is-link @click="isGenderShow=true" />
    <!-- 年龄 -->
    <van-cell title="生日" :value="user.birthday" is-link @click="isBirthdayShow=true" />

    <!-- 修改昵称弹层 -->
    <van-popup v-model="isNameShow" position="bottom" :style="{height:'100%'} ">
      <update-name @close="isNameShow=false" v-model="user.name" />
    </van-popup>

    <!-- 修改性别弹层 -->
    <van-popup v-model="isGenderShow" position="bottom" :style="{height:'35%'} ">
      <update-gender v-if="isGenderShow" @close="isGenderShow=false" v-model="user.gender" />
    </van-popup>

    <!-- 修改生日弹层 -->
    <van-popup v-model="isBirthdayShow" position="bottom" :style="{height:'45%'} ">
      <update-birthday v-if="isBirthdayShow" v-model="user.birthday" @close="isBirthdayShow=false" />
    </van-popup>

    <!-- 修改头像弹层 -->
    <van-popup v-model="isAvatorShow" position="bottom" :style="{height:'100%'} ">
      <update-avator v-if="isAvatorShow" :img="img" @updateAvator="user.photo=$event" @close="isAvatorShow=false" />
    </van-popup>
  </div>
</template>

<script>
// 导入接口
import { getUserProfile } from '@/api/user.js'
// 导入组件
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdateAvator from './components/update-avator.vue'
export default {
  name: 'userProfile',
  data () {
    return {
      // 个人资料
      user: {},
      isNameShow: false,
      isGenderShow: false,
      isBirthdayShow: false,
      isAvatorShow: false,
      img: ''
    }
  },
  methods: {
    // 上传文件信息
    inputChange () {
      // 获取文件
      const file = this.$refs.inputFile.files[0]
      // 获取blob数据  二进制大对象
      this.img = window.URL.createObjectURL(file)
      // console.log(imgUrl)
      this.isAvatorShow = true
      this.$refs.inputFile.value = ''
    },
    // 获取个人资料
    async UserProfile () {
      try {
        const { data: res } = await getUserProfile()
        console.log(res)
        this.user = res.data
      } catch (err) {
        this.$toast('获取失败,请重试')
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: { UpdateName, UpdateGender, UpdateBirthday, UpdateAvator },
  created () {
    this.UserProfile()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.userProfile-container {
  .van-nav-bar .van-icon {
    color: #fff;
  }

  .avator-cell {
    align-items: center;
    .van-image {
      vertical-align: middle;
    }
  }
}
</style>
